<template>
    <div class="login-box">
        <div class="login-form">
            <h2>e店邦O2O平台</h2>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <!-- 注意， form-item 的prop属性一定要 model 里面的 属性名一致 -->
                <el-form-item prop="username">
                    <el-input type="text" prefix-icon="el-icon-user-solid" v-model="ruleForm.username"
                        autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" prefix-icon="el-icon-lock" v-model="ruleForm.password"
                        autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model.number="ruleForm.code">
                        <!-- <i slot="prefix" class="el-input__icon el-icon-date"></i> -->
                        <svg-icon slot="prefix" icon-file-name="404" />
                    </el-input>
                    <img @click="getVerifyCode" :src="verifyCodeImag" alt="">
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { getVerifyCodeImageApi, loginApi, getRoutesApi } from '@/api'
export default {
    data() {
        // rule 规则
        // value 输入的值
        // callback 验证通过回调
        var validatePassword = (rule, value, callback) => {
            if (value === '') {
                // 如果验证不通过，需要调用callback ，传入一个 Error对象
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                username: 'admin',
                password: 'admin123',
                code: '888888',
                uuid: ''
            },
            rules: {
                // rules 里面的key要保持和 form 对象里面的key一致
                username: [
                    // required 是否必填 
                    // message 提示信息
                    // trigger 触发校验的时机
                    { required: true, message: "请输入用户名", trigger: 'blur' }
                    // { validator: validatePass, trigger: 'blur' }
                ],
                password: [
                    // 自定义校验规则
                    { validator: validatePassword, trigger: 'blur' }
                ],
                code: [
                    { required: true, message: "请输入验证码", trigger: 'blur' }
                ]
            },
            verifyCodeImag: ''
        };
    },
    methods: {
        submitForm(formName) {
            // 再次对数据进行校验
            this.$refs[formName].validate((valid) => {
                // 如果 valid 参数为true，表示验证通过
                if (valid) {
                    // 发请求
                    loginApi(this.ruleForm).then(res => {
                        if (res.code === 200) {
                            // 存token
                            localStorage.setItem('token', res.token)
                            // 跳转到首页
                            this.$router.push('/')
                            // // 获取该用户的路由  -- 这段代码移到到了 beforeEach 里面
                            // getRoutesApi().then(res => {
                            //     if (res.code === 200) {
                            //         // 把数据放到vuex
                            //         this.$store.commit('user/modifyRoutes', res.data)

                            //     }
                            // })
                        }
                    })
                } else {
                    // console.log('error submit!!');
                    // 只需要返回 false 就是验证不通过
                    return false;
                }
            });
        },
        getVerifyCode() {
            getVerifyCodeImageApi().then(res => {
                if (res.code == 200) {
                    // 获取图片成功 - 补全前缀
                    this.verifyCodeImag = 'data:image/gif;base64,' + res.img
                    // 把验证码的uuid存起来
                    this.ruleForm.uuid = res.uuid;
                }
            })
        }
    },
    created() {
        this.getVerifyCode();
    }
}
</script>
 
<style lang = "less" scoped>
.login-box {
    width: 100vw;
    height: 100vh;
    // background-color: skyblue;
    background-image: url('../assets/images/loginBg.jpg');

    .login-form {
        width: 400px;
        margin: 0 auto;
        background-color: #fff;
        padding: 40px;
        border-radius: 10px;
        transform: translateY(200px);

        .el-button--primary {
            width: 100%;
        }

        /deep/.el-form-item__content {
            display: flex;
        }

        img {
            width: 100px;
            margin-left: 20px;
        }

        h2 {
            padding-bottom: 40px;
            text-align: center;
        }
    }
}
</style>